<template>
  <el-form ref="form" v-bind="$attrs" class="xdh-form" :class="formClasses" @submit.native.prevent.stop="preventSubmit" @keyup.native.13="handelEnterSubmit" :model="currentModel">
    <!-- TODO:编辑模式 -->
    <div class="xdh-form__body" ref="body" v-if="edits">
      <slot>
        <el-row :gutter="10">
          <div v-for="(item,index) in fields" :key="item.prop">

            <el-col :span="item.col">
              <div v-if="!item.isshow">
                <xdh-form-item v-bind="item" :load="loads[index]" :indexs="index" @refreshInit="refreshInit"></xdh-form-item>
              </div>
            </el-col>

          </div>
        </el-row>
      </slot>
      <el-row :gutter="10">
        <el-col :span="24">
          <div v-if="footer && isFooterInline" class="xdh-form__footer" :style="'margin-top:20px; text-align:right;padding-right:20px;'">
            <slot name="footer" v-if="footer">
              <el-button v-if="submitText" type="primary" :loading="footerLoading" @click="submit" :size="footerSize">
                <slot name="submitIcon"></slot> {{submitText}}
              </el-button>
              <el-button v-if="resetText"  :loading="footerLoading" @click="reset" :size="footerSize">
                <slot name="resetIcon"></slot> {{resetText}}
              </el-button>
            </slot>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- TODO:视图模式 -->
    <template v-if="!edits">
    <el-tabs :key="getkey()" v-model="tab_id" type="border-card" >
      <el-tab-pane v-for="(items,inx) in fields" :key="inx" :label="items.title" :name="items.id">

        <div class="xdh-form__body" ref="body">
          <slot>
            <el-row :gutter="10">
              <div v-for="(item,index) in items.content" :key="item.prop">

                <el-col :span="item.col">
                  <div v-if="!item.isshow">
                    <xdh-form-item v-bind="item" :load="loadss[inx+'_'+index]" :indexs="index" @refreshInit="refreshInit" ></xdh-form-item>
                  </div>
                </el-col>

              </div>
            </el-row>
          </slot>
          <el-row :gutter="10">
            <el-col :span="24">
              <div v-if="footer && isFooterInline" class="xdh-form__footer" :style="'margin-top:20px; text-align:right;padding-right:20px;'">
                <slot name="footer" v-if="footer">
                  <el-button v-if="submitText" type="primary" @click="submit" :size="footerSize">
                    <slot name="submitIcon"></slot> {{submitText}}
                  </el-button>
                  <el-button v-if="resetText" @click="reset" :size="footerSize">
                    <slot name="resetIcon"></slot> {{resetText}}
                  </el-button>
                </slot>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-tab-pane>
    </el-tabs>
    </template>
    <el-form-item v-if="footer && !isFooterInline" class="xdh-form__footer" :class="footerClasses" :label="footerAlignLabel">
      <div :style="'margin-top:20px; text-align: '+footerAlign+';'">
        <slot name="footer" v-if="footer">
          <el-button v-if="submitText" type="primary" @click="submit" :size="footerSize">{{submitText}}</el-button>
          <el-button v-if="resetText" @click="reset" :size="footerSize">{{resetText}}</el-button>
        </slot>
      </div>
    </el-form-item>

  </el-form>
</template>

<script>
/**
 * 表单组件
 * @module widgets/xdh-form
 *
 */
import XdhFormItem from './xdh-form-item'
import { clean } from './utils'
import { isEqual, debounce } from '@/utils/util'
import modules from '@/widgets/helper/setting'


/**
 * 插槽
 * @member slots
 * @property {string} - 自定义表单项内容，需包含 xdh-form-item 组件
 * @property {string} footer 定义底部内容
 */

export default {
  name: 'XdhForm',
  components: {
    XdhFormItem
    
  },
  provide() {
    return {
      xdhForm: this
    }
  },
  /**
   * 参数属性，在支持el-form所有参数并扩展以下参数
   * @property {Object} [model] 表单初始化实体，通常用来设置表单项的默认值
   * @property {Array} [fields] 表单字段配置，配置参数参考xdh-form-item组件，该配置是用来动态创建xdh-form-item, 不支持group、array、object
   * @property {Object} [dictMap] 字典数据映射，格式： {'字典编码': [字典数组]}
   * @property {String} [validateMsg] 验证信息显示方式， 可选值 'top', 'right', 'bottom'
   * @property {Boolean} [footer=true] 是否显示底部操作按钮
   * @property {String} [footerAlign=label] 底部按钮对齐方式，可选值 'label', 'left', 'right', 'center','inline'
   * @property {Boolean} [footerBorder=true] 是否显示底部边框线
   * @property {String} [submitText=提交] 提交按钮文本，为空时将不显示按钮
   * @property {String} [resetText=重置] 重置按钮文本，为空时将不显示按钮
   * @property {String} [footerSize] 底部按钮尺寸，可选值 'large', 'medium', 'small', 'mini'
   * @property {string} [size] 内部表单项尺寸，可选值 medium / small / mini
   * @property {string} [labelPosition] 表单域标签的位置，如果值为 left 或者 right 时，则需要设置 label-width
   * @property {string} [labelWidth] 表单域标签的宽度，例如 '50px'。作为 Form 直接子元素的 form-item 会继承该值。支持 auto。
   * @property {string} [labelSuffix]  表单域标签的后缀
   * @property {boolean} [inline=false] 内行模式
   * @property {String} [inlineSize]  inline模式的字段域宽度尺寸，可选值 'large', 'medium', 'small'
   * @property {Function} [load] 字典数据加载方法，必须返回Promise.resolve options数组
   * @property {Boolean} [enterSubmit=true] 是否回车键提交表单
   *
   */
  props: {
    // 表单实体默认值
    model: {
      type: Object,
      default() {
        return {}
      }
    },
    fields: {
      type: Array
    },
    // 字典数据构造方法，必须返回Promise
    load: {
      type: Function
    },
    // 静态字典数据配置对象
    dictMap: {
      type: Object,
      default() {
        return {}
      }
    },
    // 验证信息显示方式
    validateMsg: {
      type: String,
      default: '',
      validator(val) {
        return ['top', 'right', 'bottom', ''].includes(val)
      }
    },
    // 是否显示footer
    footer: {
      type: Boolean,
      default: true
    },
    edits: {
      type: Boolean,
      default: false
    },
    // 底部对齐方式
    footerAlign: {
      type: String,
      default: 'center',
      validator(val) {
        return ['label', 'left', 'right', 'center', 'inline', ''].includes(val)
      }
    },
    // 底部是否加边框, 设置了footerAlign才有效
    footerBorder: {
      type: Boolean,
      default: true
    },
    footerLoading: {
      type: Boolean,
      default: false
    },
    // 提交按钮文本
    submitText: {
      type: String,
      default: '提交'
    },
    // 重置按钮文本
    resetText: {
      type: String,
      default: '重置'
    },
    // inline模式的字段域尺寸
    inlineSize: {
      type: String,
      default: '',
      validator(val) {
        return ['large', 'medium', 'small', ''].includes(val)
      }
    },
    // 底部按钮尺寸
    footerSize: {
      type: String,
      validator(val) {
        return ['large', 'medium', 'small', 'mini', ''].includes(val)
      }
    },
    // 回车键提交表单
    enterSubmit: {
      type: Boolean,
      default: true
    },
    // 设计模式，仅在可视化制作工具中实用
    designMode: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      currentModel: { ...this.model },
      loads: [],
      loadss: {},
      tab_id: 0,
      alertTitle: "",
      alertHtmlIsShow: false,
      alertWidth: "60%",
      alertheight: "100%",
      alertAttrs: {},
      alertData: {},
    }
  },
  watch: {
    model: {
      deep: true,
      handler(val) {
        // console.log(val,'$$$$$$$$$$$$$')
        if (!isEqual(val, this.currentModel)) {
          this.currentModel = { ...val }
        }
      }
    },
    currentModel: {
      deep: true,
      handler(val, old) {
        // console.log(val,old,' %%%%%%%%%% ')
        /**
         * 表单值发生改变时触发
         * @event change
         * @param {Object} val 新实体
         * @param {Object} old 旧实体
         */
        this.proxyHandleChange(val, old)
      }
    },
    fields: {
      deep: true,
      async handler(val, old) {
        if (val) {
          await this.loadapi();
        }
      }
    }
  },
  computed: {

    extendAttrs() {
      return {
        ...clean(this.$attrs),
        validateMsg: this.validateMsg,
        inlineSize: this.inlineSize

      }
    },
    formClasses() {
      return [this.$attrs.inline ? `is-inline-size is-inline-${this.inlineSize}` : '']
    },
    footerClasses() {
      return [
        `is-${this.footerAlign}`,
        {
          'is-border': (this.footerBorder && this.footerAlign && this.footerAlign !== 'label')
        }
      ]
    },
    footerAlignLabel() {
      return this.footerAlign === 'label' ? ' ' : null
    },
    isFooterInline() {
      return this.footerAlign === 'inline'
    }
  },
  methods: {
    /**
     * 提交表单
     * @method submit
     */
    async submit() {
      console.log(this.currentModel,'表单')
      this.$refs.form.validate(async valid => {
        if (valid) {
          console.log(this.currentModel)
          /**
           * 提交表单时触发
           * @event submit
           * @param {Object} model 表单实体
           */
          this.$emit('submit', this.currentModel)
        }
      })
    },
    /**
     * 重置表单
     * @method reset
     * @param {Object} model 表单实体
     */
    reset() {
      this.$refs.form.resetFields()
      this.currentModel = { ...this.model }
      /**
       * 表单重置时触发
       * @event reset
       * @param {Object} model 表单实体
       */
      this.$emit('reset', this.currentModel)
    },
    preventSubmit() {
      return false
    },
    handelEnterSubmit() {
      this.enterSubmit && this.submit()
    },
    handleChange(val, old) {
      /**
       * 表单值改变时触发
       * @event change
       * @param {Object} model 表单实体
       */
      // console.log(77777777777, val, old)
      this.$emit('change', val, old)
    },
    async loadapi() {
      // console.log('loadqpi','================================',this.loads,this.fields)
      if (this.fields) {
        if (this.edits) {
          this.fields.find((n, i) => {
            // console.log(i,n)
            if (n['dictapi']) {
              this.loads[i] = modules['dict'][n['dictapi']]
            }
          })
        } else {
          // let apiarr=[];
          this.fields.forEach((field,inx) => {
            if (field['content']) {
              field['content'].find((n, i) => {
                if (n['dictapi']) {
                  this.loadss[inx+'_'+i] = modules['dict'][n['dictapi']]
                  // console.log(this.loadss)
                }
              })
            }

          })
        }
      }
    },
    refreshInit(val) {
      this.$emit('refreshInit', val);
    },
    getkey() {
      if (!this.isKeys) {
        this.isKeys = Math.random();
      }
      return this.isKeys;
    }
  },
  created() {
    this.proxyHandleChange = debounce(this.handleChange, 300, false, this);
     if (this.loads) this.loadapi();
  }
}
</script>
